<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="title">
      <div class="serve">
        <div class="name">区域搜索:</div>
        <div>
          <el-input v-model="reg.skuName" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" icon="el-icon-search" size="medium" @click="sever">搜索</el-button>
      </div>
    </div>
    <!-- main -->
    <el-row>
      <el-col :span="24"
        ><el-card body-style="min-height: 800px">
          <div class="main-btn">
            <el-button
              type="primary"
              icon="el-icon-search"
              style="margin-left: 10px"
              @click="addFn"
              >新建</el-button
            >
          </div>
          <!-- 主体 -->
          <div class="mian-form">
            <template>
              <el-table :data="this.footerList" style="width: 100%">
                <el-table-column prop="index" label="序号" width="60" />
                <el-table-column prop="skuName" label="商品名称" width="180" />
                <el-table-column prop="skuImage" label="商品图片">
                  <template v-slot:default='scope'>
                    <el-image :src='scope.row.skuImage' style="width: 24px; height: 24px"/>
                  </template>
                </el-table-column>
                <el-table-column prop="brandName" label="品牌" />
                <el-table-column prop="unit" label="规格" />
                <el-table-column prop="price" label="商品价格" />
                <el-table-column prop="skuClass.className" label="商品类型" />
                <el-table-column prop="updateTime" label="创建日期" />
                <el-table-column label="操作">
                  <el-button type="text">修改</el-button>
                </el-table-column>
              </el-table>
            </template>
          </div>

          <!-- footer -->
          <div class="footer">
            <Footer :footerList="footerList" :number="number" @up="up" @next="next" :pageIndex="reg.pageIndex"/>
          </div>
          <!-- 新增框 -->
          <addPage :visible.sync='visible'/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import addPage from '@/views/commodity/components/manage.addPage.vue'
import Footer from '@/components/public/FtooTer.vue'
import { partner } from '@/api/commodity/manage'
export default {
  components: {
    Footer,
    addPage
  },
  data () {
    return {
      list: [],
      reg: {
        pageIndex: 1,
        pageSize: 10,
        skuName: ''
      },
      number: '',
      footerList: [],
      visible: false
    }
  },
  async created () {
    this.Data()
  },
  methods: {
    // 搜索
    async sever () {
      this.Data()
    },
    // 新增
    addFn () {
      this.visible = true
    },
    // 下一页
    next () {
      this.reg.pageIndex++
      // 页数
      this.Data()
    },
    // 上一页
    up () {
      this.reg.pageIndex--
      // 页数
      this.Data()
    },
    async Data () {
      const res = await partner(this.reg)
      this.footerList = res.currentPageRecords
      this.footerList.forEach((item, index) => {
        this.$set(item, 'index', index + 1 + ((this.reg.pageIndex - 1) * 10))
      })
      console.log(this.footerList)
      // 总条数
      this.number = res.totalCount
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  background-color: #fff;
  height: 9.5%;
  margin-bottom: 1.2%;
  display: flex;
  line-height: 64px;
  .serve {
    display: flex;
    .name {
      width: 35%;
      font-size: 14px;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.main-form {
  width: 100%;
}
</style>
